<template>
	<section>
		<div class="border-box">
			<div class="border-b20">
				<scroll-navbar 
					:channels="channels" 
					v-model="selected" 
					key-id="strId"
					key-name="name"
				></scroll-navbar>
			</div>			
			<ul  class="coupon-contain bg-f1f1f1 pt30rem pr30rem pb30rem pl30rem" v-if="flag">
				<!-- 待使用 -->
				<li class="mb30rem layout flex-start bg-white"
					v-show=" selected == '1' "
					v-for="item in coupon_list"
				>
					<div class="coupon-left-content white coupone-new align-center flexcenter">
						<div>
							<h2>
								￥
								<span class="fs8rem">
									{{item.money}}
								</span>
							</h2>
							<p class="fs20rem">
								满{{item.at_least}}可用
							</p>
						</div>							
					</div>
					<div class="coupon-right-content pt20rem pb20rem pl20rem">
						<h2 class="pl30rem pr30rem pb30rem fs28rem black bold goods-name">
							{{item.coupon_name}}
						</h2>
						<div class="pl30rem pr30rem pt20rem layout">
							<span class="fs20rem c999">
								{{item.start_time,"yyyy-MM-dd"|formatDate}}
								-
								{{item.end_time,"yyyy-MM-dd"|formatDate}}
							</span>
						</div>
					</div>
				</li>
				<!-- 已过期 -->
				<li class="mb30rem layout flex-start bg-white" 
					v-show=" selected == '2' || selected == '3' "
					v-for="item in coupon_list"
				>
					<div class="coupon-left-content white coupone-old align-center flexcenter" >
						<div>
							<h2>
								￥
								<span class="fs8rem">
									{{item.money}}
								</span>
							</h2>
							<p class="fs20rem">
								满{{item.at_least}}可用
							</p>
						</div>							
					</div>
					<div class="coupon-right-content pt20rem pb20rem old-contain"
						:class="{'stale_img': selected == '3','used-img':selected == '2'}"
					>
						<h2 class="pl30rem pr30rem fs28rem black bold goods-name">
							{{item.coupon_name}}
						</h2>
						<div class="pl30rem pr30rem pt20rem layout">
							<span class="fs20rem c999">
								{{item.start_time,"yyyy-MM-dd"|formatDate}}
								-
								{{item.end_time,"yyyy-MM-dd"|formatDate}}
							</span>
						</div>
					</div>
				</li>
			</ul>
			<template v-else>
				<default :imgUrl="img" explain='您还没有优惠券'></default>
			</template>
		</div>		
	</section>
</template>

<script>
	import ScrollNavbar from '@/components/Scroll-navbar';
	import { getCouponInfo } from '@/api/goods';
    import { formatDate } from "@/utils/index";
    import Default from "@/components/Default";

	export default {
		components: {
			ScrollNavbar,
			Default
		},
		data() {
			return{
				uid         : localStorage.getItem('uid'),
				selected    : '1',
				coupon_list : [],
				flag        : false,
				img         : require('../../../assets/icon-coupon.png'),
				channels: [ 
					{ strId: '1', name: '待使用'},
					{ strId: '2', name: '已使用'},
					{ strId: '3', name: '已过期'}
				]
			}
		},
		methods:{
			loadData()
			{
				let status = this.selected;
				getCouponInfo(this.uid, status).then( res=>{
					this.coupon_list = res.data
					if(this.coupon_list.length > 0)
						this.flag = true;
					else
						this.flag = false;
				});
			}			
		},
		filters:
 		{
			formatDate(time, fmt)
			{
				time*=1000;
				let date = new Date(time);
				return formatDate(date,fmt)
			}
		},
		watch:{
			selected(){
				this.loadData();
			}
		},
		created()
		{
			this.loadData();
		}		
	}
	
</script>

<style lang="less">
	.border-box{
		box-sizing: border-box;
		#scroll-navbar{
			.mint-navbar{
				width: 100%;
			}
		}
		.coupon-contain{
			min-height: 1235/28rem;
			.coupon-left-content{
				width: 230/28rem;
				height: 200/28rem;
				.fs80rem{
					font-size: 80/28rem;
				}
			}
			.coupon-right-content{
				width: 16.3rem;
				.goods-name{
					display: block;
					height: 80/28rem;
					overflow-y: hidden;
					border-bottom: 1px dashed #d2d2d2;
				}
				.now-use-btn{
					background-color: #ff0036;
					border-radius: 50px;
				}
			}
			.coupone-new{
				background-image: url("../../../assets/member/coupon-new.png");
				background-size: 100%;
				background-repeat: no-repeat;
			}
			.coupone-old{
				background-image: url("../../../assets/member/coupon-old.png");
				background-size: 100%;
				background-repeat: no-repeat;
			}
			.old-contain{
				background-size: 115/28rem;
				background-repeat: no-repeat;
				background-position: 90% bottom;
			}
			.stale_img{
				background-image: url("../../../assets/member/stale_img.png");				
			}
			.used-img{
				background-image: url("../../../assets/member/used_img.png");
			}
		}
		.bg-f1f1f1{
			background-color: #f1f1f1;
		}
	}		
	.border-box * {
		box-sizing: border-box;
	}
	
	
</style>

